<template>
  <!-- 单品成交额排行榜 -->
  <div class="productAmount">
    <div class="title">
      <img src="../assets/img/单品成交额排行title.png" alt="" />
    </div>
    <div class="listTitle">
      <p class="font12 color97 line1">排名</p>
      <p class="font12 color97 line2">品名</p>
      <p class="font12 color97 line3">成交量</p>
      <p class="font12 color97 line4">用户数</p>
      <p class="font12 color97">成交额</p>
    </div>
    <div
      :class="{ scrollBox: line10 == 0, scrollBoxDouble: line10 == 1 }"
    >
      <vue-seamless-scroll
        :data="goodsList"
        :class="{
          'seamless-warp': line10 == 0,
          'seamless-warpDouble': line10 == 1,
        }"
        :class-option="classOption"
        v-show="line10 == 0"
      >
        <ul>
          <li v-for="(item, index) in goodsList" :key="index" class="font12">
            <p class="order">{{ item.rank }}</p>
            <p class="name">{{ item.name }}</p>
            <p class="turnover">{{ item.quantity }}</p>
            <p class="user">{{ item.userCount }}</p>
            <p class="money">￥{{ item.longGmv }}</p>
          </li>
        </ul>
      </vue-seamless-scroll>
      <ul v-show="line10 == 1">
        <li v-for="(item, index) in goodsList" :key="index" class="font12">
          <p class="order">{{ item.rank }}</p>
          <p class="name">{{ item.name }}</p>
          <p class="turnover">{{ item.quantity }}</p>
          <p class="user">{{ item.userCount }}</p>
          <p class="money">￥{{ item.longGmv }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
export default {
  props: {
    line10: {
      default: 0,
    }, //1代表显示10个，0代表显示5个
  },
  data() {
    return {
      goodsList: [],
      totalAxios: null,
    };
  },
  created() {
    this.getGoodsGmv();
    this.intervalAxios();
  },
  methods: {
    async getGoodsGmv() {
      let res = await getRequest(url.goodsGmv);
      if (res.data.code == "000000") {
        this.goodsList = res.data.content;
        this.goodsList.map((obj) => {
          obj.quantity = this.$parent.toThousands(obj.quantity);
          obj.userCount = this.$parent.toThousands(obj.userCount);
          obj.longGmv = this.$parent.toThousands(obj.longGmv);
        });
      }
    },
    // 2s请求一次
    intervalAxios() {
      this.totalAxios = setInterval(() => {
        this.getGoodsGmv();
      }, 18000);
    },
  },
  computed: {
    // 滚动的部分参数
    classOption() {
      return {
        step: 0.5,
        limitMoveNum: 1, //这个是修改moveSwitch()之前的使用方法，这里的数值指的是数据条数
        openTouch: false,
      };
    },
  },
  destroyed() {
    clearInterval(this.totalAxios);
  },
};
</script>

<style lang="less" scoped>
.productAmount {
  margin-top: 22px;
  .title {
    img {
      width: 363px;
      height: 39px;
    }
  }
  .listTitle {
    display: flex;
    margin: 13px 0;
    .line1 {
      margin: 0 24px 0 13px;
    }
    .line3 {
      margin: 0 41px 0 84px;
    }
    .line4 {
      margin-right: 58px;
    }
  }
  .scrollBox {
    height: 140px;
  }
  .scrollBoxDouble {
    height: 280px;
  }
  .seamless-warpDouble {
    height: 140px;
    overflow: hidden;
  }
  .seamless-warp {
    height: 140px;
    overflow: hidden;
  }
  ul {
    li {
      width: 413px;
      height: 28px;
      line-height: 28px;
      display: flex;
      .order {
        width: 26px;
        text-align: center;
        color: #e2ebf1;
        margin-left: 10px;
      }
      .name {
        width: 100px;
        color: #dedee0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 23px;
      }
      .turnover {
        color: #dedee0;
        width: 60px;
        margin-left: 10px;
      }
      .user {
        width: 40px;
        margin-left: 20px;
        color: #dedee0;
      }
      .money {
        color: #91e3f7;
        font-weight: 700;
        text-align: right;
        width: 90px;
      }
    }
    li:nth-child(odd) {
      background: rgba(20, 23, 48, 0.9);
    }
  }
}
</style>